<core-navbar-buttons slot="end" prepend>
    <ion-button *ngIf="searchEnabled" (click)="openSearch()" [ariaLabel]="'core.courses.searchcourses' | translate">
        <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
    </ion-button>
</core-navbar-buttons>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!dataLoaded" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <core-loading [hideUntil]="dataLoaded" placeholderType="column" placeholderHeight="48px">
        <ion-list class="list-item-limited-width">
            <!-- Site home main contents. -->
            <section *ngIf="section && section.hasContent" class="core-course-module-list-wrapper">
                @if (section.name || section.visible === 0 || section.availabilityinfo) {
                    <ion-item-divider class="course-section ion-text-wrap"
                        [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
                        <ion-label>
                            <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
                                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="siteHomeId" />
                            </h2>
                            <div *ngIf="section.visible === 0 && section.uservisible !== false">
                                <ion-badge color="warning">
                                    {{ 'core.course.hiddenfromstudents' | translate }}
                                </ion-badge>
                            </div>
                            <div *ngIf="section.visible === 0 && section.uservisible === false">
                                <ion-badge color="warning">
                                    {{ 'core.notavailable' | translate }}
                                </ion-badge>
                            </div>
                            <div *ngIf="section.availabilityinfo">
                                <ion-chip class="clickable">
                                    <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
                                    <ion-label>
                                        <core-format-text [text]=" section.availabilityinfo" contextLevel="course"
                                            [contextInstanceId]="siteHomeId" />
                                    </ion-label>
                                </ion-chip>
                            </div>
                        </ion-label>
                    </ion-item-divider>
                }

                <ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
                    <ion-label>
                        <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="siteHomeId" />
                    </ion-label>
                </ion-item>

                <ng-container *ngFor="let modOrSubsection of section.contents">
                    <core-course-module *ngIf="isModule(modOrSubsection)" [module]="modOrSubsection" [section]="section" />
                </ng-container>
            </section>

            <!-- Site home items: news, categories, courses, etc. -->
            <ng-container *ngIf="items.length > 0">
                <ng-container *ngFor="let item of items">
                    <ng-container [ngSwitch]="item">
                        <ng-container *ngSwitchCase="'LIST_OF_COURSE'">
                            <ng-template *ngTemplateOutlet="allCourseList" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'LIST_OF_CATEGORIES'">
                            <ng-template *ngTemplateOutlet="categories" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'COURSE_SEARCH_BOX'">
                            <ng-template *ngTemplateOutlet="courseSearch" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'ENROLLED_COURSES'">
                            <ng-template *ngTemplateOutlet="enrolledCourseList" />
                        </ng-container>
                        <ng-container *ngSwitchCase="'NEWS_ITEMS'">
                            <ng-template *ngTemplateOutlet="news" />
                        </ng-container>
                    </ng-container>
                </ng-container>
            </ng-container>
        </ion-list>
        <core-block-side-blocks-button slot="fixed" *ngIf="hasBlocks" contextLevel="course" [instanceId]="siteHomeId" />

        <core-empty-box *ngIf="!hasContent" icon="fas-box-open" [message]="'core.course.nocontentavailable' | translate" />
    </core-loading>
</ion-content>

<ng-template #allCourseList>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.availablecourses' | translate}}</p>
            </ion-label>
        </ion-item>
    </ion-card>
</ng-template>

<ng-template #news>
    <core-course-module class="core-sitehome-news" *ngIf="newsForumModule" [module]="newsForumModule" />
</ng-template>

<ng-template #categories>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
            <ion-icon name="far-folder" slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.categories' | translate}}</p>
            </ion-label>
        </ion-item>
    </ion-card>
</ng-template>

<ng-template #enrolledCourseList>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openMyCourses()">
            <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.mycourses' | translate}}</p>
            </ion-label>
        </ion-item>
    </ion-card>
</ng-template>

<ng-template #courseSearch>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openSearch()">
            <ion-icon name="fas-magnifying-glass" slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.searchcourses' | translate}}</p>
            </ion-label>
        </ion-item>
    </ion-card>
</ng-template>
